<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :visible.sync="dialogVisible"
    :is-loading="loading"
    destroy-on-close
    @closeDialog="resetTemp"
    @comfirmBtn="submitForm"
  >
    <DtForm
      :form-opts="config"
      :width-size="1"
      :ref-obj.sync="config.ref"
    />

  </dtDialog>
</template>
<script>
import interfaceApi from '@/framework/api/workflow/interfaceManage/index'

export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      config: {
        ref: null,
        labelWidth: '112px',
        formData: {
          apiName: '',
          appCode: '',
          rwType: '',
          apiUrl: '',
          apiClass: '',
          apiRemark: ''
        },
        columns: [
          {
            prop: 'apiName',
            label: '接口名称',
            maxlength: 20,
            component: 'el-input',
            type: 'text'
          },
          {
            prop: 'appCode',
            label: '所属应用',
            type: 'select-arr',
            component: 'el-select',
            list: 'appList',
            arrLabel: 'appName',
            arrKey: 'appCode'
          },
          {

            prop: 'rwType',
            label: '接口类型',
            type: 'select-arr',
            component: 'el-select',
            list: 'rwTypeList'
          },
          {
            prop: 'apiUrl',
            component: 'el-input',
            label: '接口地址',
            type: 'textarea',
            maxlength: 200
          },
          {
            prop: 'apiClass',
            component: 'el-input',
            label: '接口类全路径',
            type: 'textarea',
            maxlength: 200
          },
          {
            prop: 'apiRemark',
            component: 'el-input',
            type: 'textarea',
            label: '接口描述',
            maxlength: 200
          }
        ],
        rules: {
          apiName: [
            { required: true, message: '请输入接口名称', trigger: 'blur' }
          ],
          appCode: [
            { required: true, message: '请选择所属应用', trigger: 'change' }
          ],
          rwType: [
            { required: true, message: '请选择接口类型', trigger: 'change' }
          ],
          apiUrl: [
            { required: true, message: '请输入接口地址', trigger: 'blur' }
          ],
          apiClass: [
            { required: true, message: '请输入接口全路径', trigger: 'blur' }
          ]
        },
        listTypeInfo: {
          appList: [],
          rwTypeList: [
            {
              label: '读',
              value: 1
            },
            {
              label: '写',
              value: 2
            }
          ]
        }
      },
      textMap: {
        update: '修改接口',
        create: '新增接口'
      },
      dialogStatus: ''
    }
  },
  methods: {
    openDialog(type, row) {
      this.dialogVisible = true
      this.resetTemp()
      if (type === 'create') {
        this.dialogStatus = 'create'
      } else {
        this.dialogStatus = 'update'
        interfaceApi.getApiInfo({ id: row.id }).then((res) => {
          this.config.formData = res.data
        })
      }
      this.config.formData.groupType = 1
      this.getAppList()
    },
    resetTemp() {
      Object.assign(
        this.$data.config.formData,
        this.$options.data().config.formData
      )
      this.config.formData = {}
      this.config.ref?.resetFields()
    },
    submitForm() {
      this.config.ref.validate(async (valid) => {
        if (valid) {
          if (this.dialogStatus == 'create') {
            await interfaceApi.addApi(this.config.formData)
          } else {
            await interfaceApi.updateApi(this.config.formData)
          }
          this.$dtMessage({
            title: '成功',
            message: this.dialogStatus == 'create' ? '新增成功' : '修改成功',
            type: 'success',
            duration: 2000
          })
          this.$parent.getList()
          this.dialogVisible = false
        }
      })
    },
    getAppList() {
      interfaceApi.getStatusThirdAppList().then((res) => {
        this.config.listTypeInfo.appList = res.data
      })
    }
  }
}
</script>

